<template>
    <div class="app-container">
        <el-card>
            <div slot="header">
                <h3>岗位信息</h3>
            </div>
            <div class="informationSelect">
                <div class="informationSelectInner">
                    <el-form :inline="true" :model="jobQuery" class="demo-form-inline">
                        <el-form-item>
                            <el-input v-model="jobQuery.job_name" placeholder="请输入岗位名称" suffix-icon="el-icon-search" />
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="jobQuery.recruitment_tatus" placeholder="请选择招聘状态"
                                suffix-icon="el-icon-search" />
                        </el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="loadJobs()">查询</el-button>
                        <el-button type="info" plain icon="el-icon-search" @click="resetData()">清空</el-button>
                        <el-button type="success" @click="showJobDialog('add')" icon="el-icon-plus">新增</el-button>
                    </el-form>
                </div>
            </div>
            <div class="informationBox">
                <template>
                    <el-table v-loading="listLoading" :data="jobs" style="width: 100%">
                        <el-table-column label="岗位编号" prop="jobId"></el-table-column>
                        <el-table-column label="岗位名称" prop="jobName"></el-table-column>
                        <el-table-column label="岗位描述" prop="jobDescription"></el-table-column>

                        <el-table-column label="招聘人数" prop="recruitingNumber">
                        </el-table-column>
                        <el-table-column label="工作地址" prop="jobLocation">
                        </el-table-column>
                        <el-table-column label="工作时间" prop="jobTime">
                        </el-table-column>
                        <el-table-column label="薪酬/小时" prop="jobSalary">
                        </el-table-column>
                        <el-table-column label="岗位需求" prop="jobRequirement">
                        </el-table-column>
                        <el-table-column label="招聘状态" prop="recruitmentTatus">
                        </el-table-column>
                        <el-table-column label="申请岗位" prop="operationTime">
                            <template slot-scope="scope">
                                <el-button type="text" @click="apply(scope.row)" icon="el-icon-edit">申请</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作时间" prop="operationTime">
                        </el-table-column>
                        <el-table-column label="操作" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" @click="showJobDialog('edit', scope.row)"
                                    icon="el-icon-edit">编辑</el-button>
                                <el-button type="text" class="delete" @click="deleteJobId(scope.row.jobId)"
                                    icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>

                    </el-table>

                    <el-dialog :visible.sync="dialogVisibleJob" title="岗位信息" @close=closeDialog>
                        <el-form :model="currentJob" :rules="rules" ref="jobForm" label-width="80px">
                            <!-- <el-form-item label="岗位编号（自动生成）" prop="jobId">
                                <el-input  v-model="currentJob.jobId" :disabled="dialogType === 'edit'"></el-input>
                            </el-form-item> -->
                            <el-form-item label="岗位名称" prop="jobName">
                                <el-input @input="forceUpdate" v-model="currentJob.jobName"></el-input>
                            </el-form-item>
                            <el-form-item label="岗位描述" prop="jobDescription">
                                <el-input @input="forceUpdate" v-model="currentJob.jobDescription"></el-input>
                            </el-form-item>
                            <el-form-item label="招聘人数" prop="recruitingNumber">
                                <el-input @input="forceUpdate" v-model="currentJob.recruitingNumber"></el-input>
                            </el-form-item>
                            <el-form-item label="工作地址" prop="jobLocation">
                                <el-input @input="forceUpdate" v-model="currentJob.jobLocation"></el-input>
                            </el-form-item>
                            <el-form-item label="工作时间" prop="jobTime">
                                <el-input @input="forceUpdate" v-model="currentJob.jobTime"></el-input>
                            </el-form-item>
                            <el-form-item label="薪酬" prop="jobSalary">
                                <el-input @input="forceUpdate" v-model="currentJob.jobSalary"></el-input>
                            </el-form-item>
                            <el-form-item label="岗位需求" prop="jobRequirement">
                                <el-input @input="forceUpdate" v-model="currentJob.jobRequirement"></el-input>
                            </el-form-item>
                            <el-form-item label="招聘状态" prop="recruitmentTatus">
                                <el-input @input="forceUpdate" v-model="currentJob.recruitmentTatus"
                                    placeholder="请输入‘在招聘’或‘已招满’"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="操作时间" prop="operationTime">
                                <el-input v-model="currentJob.operationTime"></el-input>
                            </el-form-item> -->
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisibleJob = false">取 消</el-button>
                            <el-button type="primary" @click="submitForm">确 定</el-button>
                        </div>
                    </el-dialog>
                </template>

            </div>
            <!-- 分页 -->
            <el-pagination :current-page="page" :page-size="limit" :total="total"
                style="padding: 15px 0; text-align: center;" layout="total, prev, pager, next, jumper"
                @current-change="loadJobs" />
        </el-card>

    </div>
</template>

<script>
// import job from'@/api/job/job'
import jobApi from '@/api/job'
export default {
    data() {
        return {
            listLoading: true, // 是否显示loading信息
            page: 1,//当前页
            limit: 9,//每页记录数
            jobQuery: {},//条件封装对象
            total: 0,//总记录数
            jobs: [], // 岗位列表
            dialogVisibleJob: false, // 是否显示编辑框
            dialogType: '', // 编辑框类型（新增/编辑）
            currentJob: { // 当前编辑的岗位
                isDelete: false
            },
            rules: { // 表单校验规则

                jobName: [
                    { required: true, message: '请输入岗位名称', trigger: 'blur' }
                ],
                recruitingNumber: [
                    // { required: true, message: '请输入招聘人数0~99', trigger: 'blur', pattern: /\d\d/ }
                    { required: true, message: '请输入招聘人数0~99', trigger: 'blur'}
                ],
                jobLocation: [
                    { required: true, message: '请输入工作地址', trigger: 'blur' }
                ],
                jobTime: [
                    { required: true, message: '请输入工作时间', trigger: 'blur' }
                ],
                jobSalary: [
                    { required: true, message: '请输入薪酬0~999', trigger: 'blur'}
                    // { required: true, message: '请输入薪酬0~999', trigger: 'blur', pattern: /\d\d\d/ }
                ],
                recruitmentTatus: [
                    { required: true, message: '请输入招聘状态（在招聘/已招满）', trigger: 'blur', }
                ]
            },

        };
    },
    mounted() {
        // 加载岗位列表
        this.loadJobs();
    },
    methods: {
        forceUpdate() {
            this.$forceUpdate()
        },
        // 加载岗位列表
        loadJobs(page = 1) {
            this.page = page
            this.listLoading = true
            jobApi.getJobListPage(this.page, this.limit, this.jobQuery)
                .then(res => {
                    // console.log(11111, res)
                    this.jobs = res.data.rows
                    this.total = res.data.total + 1
                    // console.log(2222, this.jobQuery)
                })
                .catch(error => {
                    console.log(error)
                })
            this.listLoading = false
        },
        resetData() {
            this.jobQuery = {}
            this.loadJobs()
        },
        // 显示编辑框
        showJobDialog(type, vjob) {
            // this.currentJob = {};
            this.dialogType = type;
            if (type === 'add') {
                this.currentJob = {
                    isDelete: false
                    // jobId: '',
                    // jobName: '',
                    // jobDescription: ''
                };
            } else if (type === 'edit') {
                // this.currentJob = Object.assign({}, job);
                Object.assign(this.currentJob, vjob);
                console.log(111,this.currentJob)
            }
            // this.$nextTick(() => {
            //     // this.$refs.jobForm.resetFields();
            //     this.currentJob.resetFields();
            // })
            vjob = {}
            this.dialogVisibleJob = true;

        },
        //关闭弹框的事件
        closeDialog() {
            // this.$nextTick(() => {
            //     this.$refs.jobForm.resetFields();
            // })
            // this.dialogVisibleJob = false
            this.currentJob = {};
        },
        //岗位申请
        apply(row) {
            this.$router.push({
                name: 'Apply',
                query: { id: row.jobId }
            });
        },
        // 提交表单
        submitForm() {
            this.$refs.jobForm.validate(currentJob => {
                if (currentJob) {
                    // 调用后端API保存岗位数据
                    if (this.dialogType === 'add') {
                        // console.log(33333, currentJob)
                        jobApi.addJob(this.currentJob)
                            .then(res => {
                                this.loadJobs();
                                this.dialogVisibleJob = false;
                                this.$message.success('添加成功');

                            });
                    } else if (this.dialogType === 'edit') {
                        // console.log(222, this.currentJob)
                        jobApi.updateJob(this.currentJob)
                            .then(res => {
                                this.loadJobs();
                                this.dialogVisibleJob = false;
                                this.$message.success('修改成功');

                            });
                    }
                    //1.清除所有表单项的验证提示信息

                    // // 模拟保存数据
                    // this.loadJobs();


                }
            });
        },

        // 删除岗位
        deleteJobId(jobId) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                jobApi.deleteJob(jobId)
                    .then((res) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.loadJobs()
                    })
            }).catch((response) => { // 失败
                    if (response === 'cancel') {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败'
                        })
                    }
                })
        }
    },
    computed: {
        // 根据搜索关键词过滤岗位列表
        // filteredJobs() {
        //     return this.jobs.filter(job => {
        //         const keyword = this.search.toLowerCase();
        //         return job.jobId.toLowerCase().indexOf(keyword) > -1 || job.jobName.toLowerCase().indexOf(keyword) > -1 || job.jobDesc.toLowerCase().indexOf(keyword) > -1;
        //     });
        // }
    }
};

</script>

<style >
.informationBox {
    border-radius: 50px;
    background: #e0e0e0;
    box-shadow: 20px 20px 60px #ffffff,
        -20px -20px 60px #ffffff;
}

.informationSelect {
    border-radius: 10px;
    /* background: linear-gradient(315deg, #e6e6e6, #ffffff); */
    background: #e6e6e6;
    /* box-shadow: -20px -20px 60px #d9d9d9,
        20px 20px 60px #ffffff; */

    margin-bottom: 20px;
}

.informationSelectInner {
    padding: 10px;
}

.delete {
    color: #f56c6c;
}
</style>

